import React, { useEffect, useState } from 'react'
import './style.css'
import { Table, Divider, Flex, Card, Button } from 'antd'
import type { TableProps } from 'antd'
import type {
  MixerConcreteDict,
  MixerConcreteDictQuery,
  MixerConcreteSort,
  MixerConcreteSortQuery
} from './typings'
import { getConcreteSortPage, getConcreteDictPage } from './service'
import DictPopForm from './components/dictPopForm'

const dictColumns: TableProps<MixerConcreteDict>['columns'] = [
  {
    title: '混凝土编码',
    dataIndex: 'concreteCode',
    key: 'concreteCode'
  },
  {
    title: '混凝土名称',
    dataIndex: 'concreteName',
    key: 'concreteName'
  },
  {
    title: '规格型号',
    dataIndex: 'model',
    key: 'model'
  },
  {
    title: '计量单位',
    dataIndex: 'uom',
    key: 'uom'
  },
  {
    title: '关联物资编码',
    dataIndex: 'catalogCode',
    key: 'catalogCode'
  },
  {
    title: '关联物资名称',
    dataIndex: 'catalogName',
    key: 'catalogName'
  },
  {
    title: '关联物资规格型号',
    dataIndex: 'catalogModel',
    key: 'catalogModel'
  },
  {
    title: '关联物资计量单位',
    dataIndex: 'catalogUom',
    key: 'catalogUom'
  },
  {
    title: '是否启用',
    dataIndex: 'statusText',
    key: 'statusText'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation'
  }
]

const sortColumns: TableProps<MixerConcreteSort>['columns'] = [
  {
    title: '分类编码',
    dataIndex: 'concreteTypeCode',
    key: 'concreteTypeCode'
  },
  {
    title: '分类名称',
    dataIndex: 'concreteTypeName',
    key: 'concreteTypeName'
  },
  {
    title: '是否启用',
    dataIndex: 'statusText',
    key: 'statusText'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation'
  }
]

const Page: React.FC = () => {
  const [queryConcreteSort, setQueryConcreteSort] = useState<MixerConcreteSortQuery>({
    status: 1,
    pageNumber: 1,
    pageSize: 20,
    orders: []
  })
  const [queryConcreteDict, setQueryConcreteDict] = useState<MixerConcreteDictQuery>({
    status: 1,
    pageNumber: 1,
    pageSize: 20,
    orders: [],
    sortId: ''
  })
  const [concreteSortPage, setConcreteSortPage] = useState<Array<MixerConcreteSort>>([])
  const [concreteDictPage, setConcreteDictPage] = useState<Array<MixerConcreteDict>>([])
  const [currentSortId, setCurrentSortId] = useState<string>('')
  const [sortPageIsloading,setSortPageIsLoaging]=useState(false)
  const [dictPageIsloading,setDictPageIsLoaging]=useState(false)
  const [isShowDictModal,setIsShowDictModal]=useState(false)

  const handleGetSortPage = () => {
    setSortPageIsLoaging(true)
    getConcreteSortPage(queryConcreteSort).then((res) => {
      if (res?.code == 0) {
        setConcreteSortPage(res?.data?.records)
      }
      setSortPageIsLoaging(false)
    })
  }
  const handleGetDictPage = () => {
    setDictPageIsLoaging(true)
    getConcreteDictPage(queryConcreteDict).then((res) => {
      if (res?.code == 0) {
        setConcreteDictPage(res?.data?.records)
      }
      setDictPageIsLoaging(false)
    })
  }

  const handleSortRowSelect = (arr: Array<string>) => {
    // console.log(arr)
    setCurrentSortId(arr[0])
  }

  const handleOpenDictModal=()=>{
    setIsShowDictModal(true)
  }

  const handleCloseDictModal=(value:boolean)=>{
    setIsShowDictModal(value)
  }

  useEffect(() => {
    if (currentSortId != null && currentSortId != '') {
      setQueryConcreteDict({
        status: 1,
        pageNumber: 1,
        pageSize: 20,
        orders: [],
        sortId: currentSortId
      })
      handleGetDictPage()
    }
  }, [currentSortId])


  return (
    <>
      <Flex>
        <Card>
          <Flex>
            <Button onClick={handleGetSortPage} type="primary">
              查询
            </Button>
          </Flex>
          <Table
            columns={sortColumns}
            dataSource={concreteSortPage}
            rowKey={(record) => record.id}
            rowSelection={{
              type: 'radio',
              onChange: handleSortRowSelect
            }}
            loading={sortPageIsloading}
          />
        </Card>

        <Divider type="vertical" style={{ height: '100vh' }} />
        <Card>
          <Flex>
            <Button onClick={handleGetDictPage} type="primary">
              查询
            </Button>
            <Button onClick={handleOpenDictModal} type="default">
              新增
            </Button>
          </Flex>
          <Table
            columns={dictColumns}
            dataSource={concreteDictPage}
            rowKey={(record) => record.id}
            loading={dictPageIsloading}
          />
        </Card>
      </Flex>
      <DictPopForm isShow={isShowDictModal} onClose={handleCloseDictModal}/>
    </>
  )
}

export default Page
